<template>
  <ui-popup
    v-show="show"
    :z-index="zIndex"
    :overlay="overlay"
    @close-on-click-overlay="closeOnClickOverlay"
    @close="onClickOverlay"
  >
    <view v-if="title" class="ui-dialog--header" :class="[message ? '' : 'van-dialog--isolated']">
      <slot v-if="$slots.title" name="title" />
      <block v-else-if="title">{{ title }}</block>
    </view>

    <slot v-if="$slots.default" />
    <view
      v-else-if="message"
      class="van-dialog__message"
      :class="[title ? 'van-dialog__message--has-title' : '' , messageAlign ? 'van-dialog__message--' + messageAlign : '' ]"
    >
      <text class="van-dialog__message-text">{{ message }}</text>
    </view>

    <view class="van-hairline--top van-dialog__footer">
      <!-- <uiButton
        wx:if="{{ showCancelButton }}"
        size="large"
        loading="{{ loading.cancel }}"
        class="van-dialog__button van-hairline--right"
        custom-class="van-dialog__cancel"
        custom-style="color: {{ cancelButtonColor }}"
        bind:click="onCancel"
      >{{ cancelButtonText }}</uiButton>
      <uiButton
        wx:if="{{ showConfirmButton }}"
        size="large"
        class="van-dialog__button"
        loading="{{ loading.confirm }}"
        custom-class="van-dialog__confirm"
        custom-style="color: {{ confirmButtonColor }}"
        open-type="{{ confirmButtonOpenType }}"
        lang="{{ lang }}"
        business-id="{{ businessId }}"
        session-from="{{ sessionFrom }}"
        send-message-title="{{ sendMessageTitle }}"
        send-message-path="{{ sendMessagePath }}"
        send-message-img="{{ sendMessageImg }}"
        show-message-card="{{ showMessageCard }}"
        app-parameter="{{ appParameter }}"
        bind:click="onConfirm"
        bindgetuserinfo="bindGetUserInfo"
        bindcontact="bindContact"
        bindgetphonenumber="bindGetPhoneNumber"
        binderror="bindError"
        bindlaunchapp="bindLaunchApp"
        bindopensetting="bindOpenSetting"
      >{{ confirmButtonText }}</uiButton>-->
    </view>
  </ui-popup>
</template>

<script>
import uiPopup from "@/components/base/popup/index";
import uiButton from "@/components/base/button/index";
export default {
  name: "uiDialog",
  components: {
    uiPopup,
    uiButton
  },
  props: {
    show: Boolean,
    title: String,
    message: String,
    useSlot: Boolean,
    className: String,
    customStyle: String,
    asyncClose: Boolean,
    messageAlign: String,
    overlayStyle: String,
    useTitleSlot: Boolean,
    showCancelButton: Boolean,
    closeOnClickOverlay: Boolean,
    confirmButtonOpenType: String,
    width: {
      type: null
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    confirmButtonText: {
      type: String,
      default: "确认"
    },
    cancelButtonText: {
      type: String,
      default: "取消"
    },
    confirmButtonColor: {
      type: String
    },
    cancelButtonColor: {
      type: String
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    overlay: {
      type: Boolean,
      default: true
    },
    transition: {
      type: String,
      default: "scale"
    }
  },
  data() {
    return {};
  },
  watch: {
    show(show) {
      !show && this.stopLoading();
    }
  },
  created() {},
  mounted() {},
  methods: {
    onConfirm() {
      this.handleAction("confirm");
    },

    onCancel() {
      this.handleAction("cancel");
    },

    onClickOverlay() {
      this.onClose("overlay");
    },

    handleAction(action) {
      if (this.data.asyncClose) {
        this.setData({
          [`loading.${action}`]: true
        });
      }

      this.onClose(action);
    },

    close() {
      this.setData({
        show: false
      });
    },

    stopLoading() {
      this.setData({
        loading: {
          confirm: false,
          cancel: false
        }
      });
    },

    onClose(action) {
      if (!this.data.asyncClose) {
        this.close();
      }
      this.$emit("close", action);

      // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
      this.$emit(action, { dialog: this });

      const callback = this.data[
        action === "confirm" ? "onConfirm" : "onCancel"
      ];
      if (callback) {
        callback(this);
      }
    }
  }
};
</script>

<style scoped lang="scss">
</style>
